<template>
    <nav class="navbar">
        <div class="navbar-content">
            <template v-if="!isPhone">
                <div class="nav-links">
                    <a :class="{active: current === link.href}" v-for="link in navLinks" :key="link.href" :href="link.href">
                        {{ link.content }}
                    </a>
                    <div class="slider" ref="sliderRef"></div>
                </div>
            </template>
            <template v-else>
                <a class="title" href="#">Kev</a>
                <div class="toggleIcon" :class="{ toggle }" @click="toggle = !toggle"></div>
                <div class="phone-nav-links" :class="{ toggle }">
                    <div class="phone-nav-links-container" :class="{'is-close': closed}">
                        <a :class="{active: current === link.href}" v-for="link in navLinks" :key="link.id" :href="link.href" @click="toggle = !toggle">
                            {{ link.content }}
                        </a>
                        <div class="slider" ref="sliderRef"></div>
                    </div>
                </div>
            </template>
        </div>
    </nav>
</template>

<script setup>
import {useI18n} from 'vue-i18n';
import EventBus from "@utils/EventBus.js";

const { t } = useI18n();
const viewportWidth = ref(import.meta.env.SSR ? 0 : window.innerWidth);
const toggle = ref(false);
const closed = ref(true);
const sliderRef = ref(null);
let closedTimer = null;
watch(toggle, (value) => {
    if (value) {
        clearTimeout(closedTimer);
        closed.value = false;
        handleScroll();
    } else {
        closedTimer = setTimeout(() => closed.value = true, 300);
    }
});
const current = ref(import.meta.env.SSR ? '#home' : (location.hash || '#home'));
let sections = [];
const isPhone = computed(() => viewportWidth.value <= 768);
const navLinks = reactive([
    { href: '#home', content: computed(() => t('home')) },
    { href: '#about', content: computed(() => t('about')) },
    { href: '#skills', content: computed(() => t('skills')) },
    { href: '#projects', content: computed(() => t('projects')) },
    { href: '#experience', content: computed(() => t('experience')) },
]);

const handleResize = () => viewportWidth.value = import.meta.env.SSR ? 0 : window.innerWidth;

const handleScroll = () => {
    const middle = import.meta.env.SSR ? 0 : window.innerHeight / 2;
    sections.forEach((section) => {
        const rect = section.getBoundingClientRect();
        if (rect.top < middle && rect.bottom > middle) {
            current.value = `#${section.id}`;
            nextTick(() => {
                if (sliderRef.value) {
                    const dom = document.querySelector(`a[href="#${section.id}"]`);
                    sliderRef.value.style.width = `${dom.offsetWidth}px`;
                    sliderRef.value.style.height = `${dom.offsetHeight}px`;
                    if (isPhone.value) {
                        sliderRef.value.style.top = `${dom.offsetTop}px`;
                        return;
                    }
                    sliderRef.value.style.transform = `translateX(${dom.offsetLeft}px)`;
                }
            })
        }
    })
}

const resizeEvent = () => {
    handleResize();
    handleScroll();
}

EventBus.$on('language:update', resizeEvent);

onMounted(() => {
    sections = document.querySelectorAll('[id][class]');
    if (!import.meta.env.SSR) {
        window.addEventListener('resize', resizeEvent);
        window.addEventListener('scroll', handleScroll);
    }
    handleScroll();
});

onBeforeUnmount(() => {
    if (!import.meta.env.SSR) {
        window.removeEventListener('resize', resizeEvent);
        window.removeEventListener('scroll', handleScroll);
    }
});

</script>

<style lang="scss" scoped>
.navbar {
    position: fixed;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, .3);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 50px;
    z-index: 1000;
    transition: all 0.3s ease;

    @media (max-width: 768px) {
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
        border-radius: 0;
    }

    .navbar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        margin: 0 auto;
        height: 40px;

        .phone-nav-links, .nav-links {
            display: flex;
            gap: 16px;
            position: relative;

            a {
                padding: 2px 10px;
                opacity: 0;
                z-index: 1;
                flex-shrink: 0;
                transform: translateY(20px);

                &.active {
                    color: var(--md-sys-color-on-primary-container);
                }
            }

            @for $i from 1 through 6 {
                a:nth-child(#{$i}) {
                    animation: navbar-item-in .1s ease forwards;
                    animation-delay: calc(0.1s * #{$i});
                }
            }

            .slider {
                position: absolute;
                border-radius: 50px;
                background-color: var(--md-sys-color-primary-container);
            }
        }

        .phone-nav-links, .nav-links a, a:-webkit-any-link, .title {
            text-decoration: none;
            color: inherit;
        }

        .phone-nav-links-container {
            display: flex;
            gap: 16px;
            flex-direction: column;
            padding: 60px 20px 20px 20px;;
        }

        .title {
            font-weight: bold;
        }

        .toggleIcon {
            width: 16px;
            height: 16px;
            position: relative;
            cursor: pointer;
            background: none;
            border: none;
            offline: none;
            transition: all 0.3s ease;
            z-index: 1000;

            &::before, &::after {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 2px;
                background-color: var(--md-sys-color-on-surface-variant);
                transition: all 0.3s ease;
            }

            &::before {
                top: 30%;
            }

            &::after {
                top: 70%;
            }

            &.toggle::before {
                transform: translate(-50%, -50%) rotate(45deg);
                top: 50%;
            }

            &.toggle::after {
                transform: translate(-50%, -50%) rotate(-45deg);
                top: 50%;
            }
        }

        .phone-nav-links {
            top: 0;
            left: 0;
            height: 0;
            width: 100vw;
            padding: 0;
            position: absolute;
            flex-direction: column;
            background-color: var(--md-sys-color-surface-variant);
            transition: all 0.5s ease;
            overflow: hidden;
            opacity: 0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

            &.toggle {
                opacity: 1;
                height: 100vh;
            }

            a {
                width: 100%;
                text-align: center;
                white-space: nowrap;
            }
        }
    }
}
</style>
